<template>
  <h2>和为:{{ sum }}</h2>
  <button @click="sum++">点我加一</button>
  <br />
</template>

<script>
import { reactive, ref, onMounted, onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue";
export default {
  name: "Demo",
  //#region 配置项方式 使用生命周期钩子
  /* 
  beforeCreate() {
    console.log('--beforeCreate--');
  },
  created() {
    console.log('--created--');
  },
  beforeMount() {
    console.log('--beforeMount--');
  },
  mounted() {
    console.log('--mounted--');
  },
  beforeUpdate() {
    console.log('--beforeUpdate--');
  },
  updated() {
    console.log('--updated--');
  },
  beforeUnmount() {
    console.log('--beforeUnmount--');
  },
  unmounted() {
    console.log('--unmounted--');
  }, */
  //#endregion
  setup(props, context) {
    let sum = ref(0);
    //#region 组合式api 使用声明周期钩子
    onBeforeMount(()=>{
      console.log('onBeforeMount');
    });
    onMounted(()=>{
      console.log('onMounted');
    });
    onBeforeUpdate(()=>{
      console.log('onBeforeUpdate');
    });
    onUpdated(()=>{
      console.log('onUpdated');
    });
    onBeforeUnmount(()=>{
      console.log('onBeforeUnmount');
    });
    onUnmounted(()=>{
      console.log('onUnmounted');
    });
    //#endregion
    return {
      sum,
    };
  },
};
</script>